<template>
  <div id="app">
    <router-view></router-view>
    <van-tabbar route v-model="active" active-color="#07c160" v-if="this.$store.state.ifShow">
      <van-tabbar-item v-for="(item,i) in icon.active" :key="i" :info="i===3? getAllNum : ''" :to="icon.path[i]">
        <span>{{icon.name[i]}}</span>
        <img
          @click="handelCla(i)"
          class="icn"
          slot="icon"
          slot-scope="props"
          :src="props.active ? item:icon.onActives[i]"
          alt
        />
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  data() {
    return {
      name: "app",
      active: 0,
      icon: {
        active: [
          "/home-active.png",
          "/cates-active.png",
          "/search-active.png",
          "/cart-active.png",
          "/my-active.png"
        ],
        onActives: [
          "/home.png",
          "/cates.png",
          "/search.png",
          "/cart.png",
          "/my.png"
        ],
        name: ["首页", "分类", "搜索", "购物车", "我的"],
        path:['/home','/actions','/search','/cars','/myde']
      }
    };
  },
  methods: {
    handelCla(i) {
      if (i === 0) {
        this.$router.push("/home");
      } else if (i === 1) {
        this.$router.push("/actions");
      } else if (i === 2) {
        this.$router.push("/search");
      } else if (i === 3) {
        this.$router.push("/cars");
      } else if (i === 4) {
        this.$router.push("/myde");
      }
    }
  },
  computed: {
     ...mapGetters(["getAllNum"])
  }
};
</script>

<style>
</style>
